<%--
 * @fileName save.jsp
 * @author  科泰集团教研团队
 * @createTime 2024/10/13 21:57
 * @lastModify 2024/10/13 21:57
 * @version 1.0.0
 --%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <title>科泰超市管理系统</title>
    <%--  导入公共头部信息  --%>
    <%@include file="/WEB-INF/layout/head.jsp" %>
    <%--  有其他css样式可以在这里引入或编写  --%>
</head>

<body class="nav-md">
<div class="container body">
    <div class="main_container">
        <!-- 引入左边导航菜单 -->
        <jsp:include page="/WEB-INF/layout/left-nav.jsp"></jsp:include>
        <!-- 引入左边导航菜单 -->

        <!-- 引入顶部导航 -->
        <jsp:include page="/WEB-INF/layout/top-nav.jsp"></jsp:include>
        <!-- 引入顶部导航 -->
        <div class="right_col" role="main">
            <div class="">
                <div class="page-title">
                    <div class="title_left">
                        <h3>${sysUser.id == null ? '新增' : '修改'}用户信息</h3>
                    </div>
                </div>
                <div class="clearfix"></div>

                <div class="row">
                    <div class="col-md-12 col-sm-12 col-xs-12">
                        <div class="x_panel">
                            <div class="x_content">
                                <form action="${ctx}/main/user/save" enctype="multipart/form-data"
                                        class="form-horizontal form-label-left"  novalidate method="post">
                                    <%--   修改时隐藏域提交用户id  --%>
                                    <input value="${sysUser.id}" name="id"  type="hidden" />
                                    <div class="item form-group">
                                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="account">
                                            账号 <span class="required">*</span>
                                        </label>
                                        <div class="col-md-6 col-sm-6 col-xs-12">
                                            <c:if test="${empty sysUser.id}">
                                                <input id="account" class="form-control col-md-7 col-xs-12"
                                                       value="${sysUser.account}" name="account"
                                                       required="required" type="text">
                                            </c:if>
                                            <c:if test="${not empty sysUser.id}">
                                                <input id="account" class="form-control col-md-7 col-xs-12"
                                                       value="${sysUser.account}" name="account"
                                                       disabled="disabled" type="text">
                                            </c:if>
                                        </div>
                                    </div>
                                    <div class="item form-group">
                                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="realName">
                                            真实姓名 <span class="required">*</span>
                                        </label>
                                        <div class="col-md-6 col-sm-6 col-xs-12">
                                            <input id="realName" class="form-control col-md-7 col-xs-12"
                                                   value="${sysUser.realName}" name="realName"
                                                   required="required" type="text">
                                        </div>
                                    </div>
                                    <c:if test="${sysUser.id == null}">
                                        <%--   新增才需要设置密码  --%>
                                        <div class="item form-group">
                                            <label class="control-label col-md-3 col-sm-3 col-xs-12" for="password">
                                                密码 <span class="required">*</span>
                                            </label>
                                            <div class="col-md-6 col-sm-6 col-xs-12">
                                                <input id="password" class="form-control col-md-7 col-xs-12"
                                                       name="password"  required="required" type="password">
                                            </div>
                                        </div>
                                        <div class="item form-group">
                                            <label class="control-label col-md-3 col-sm-3 col-xs-12" for="confirm-password">
                                                确认密码 <span class="required">*</span>
                                            </label>
                                            <div class="col-md-6 col-sm-6 col-xs-12">
                                                <input id="confirm-password" class="form-control col-md-7 col-xs-12"
                                                       data-validate-linked="password" name="confirm-password"
                                                       required="required" type="password">
                                            </div>
                                        </div>
                                    </c:if>

                                    <div class="item form-group">
                                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="sex">
                                            性别 <span class="required">*</span>
                                        </label>
                                        <div class="col-md-6 col-sm-6 col-xs-12">
                                            <select id="sex" class="form-control" name="sex" required>
                                                <option value="">---------------请选择性别---------------</option>
                                                <option value="1" ${sysUser.sex == 1 ? "selected='selected'" : ""}>女</option>
                                                <option value="2" ${sysUser.sex == 2 ? "selected='selected'" : ""}>男</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="item form-group">
                                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="birthday">
                                            出生日期 <span class="required">*</span>
                                        </label>
                                        <div class="col-md-6 col-sm-6 col-xs-12">
                                            <div class='input-group date' id='birthday-datetimepicker'>
                                                <input id='birthday'  name="birthday"  type='text' class="form-control" />
                                                <span class="input-group-addon">
                                                   <span class="glyphicon glyphicon-calendar"></span>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="item form-group">
                                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="phone">
                                            手机号码
                                        </label>
                                        <div class="col-md-6 col-sm-6 col-xs-12">
                                            <input id="phone" class="form-control col-md-7 col-xs-12"
                                                   value="${sysUser.phone}" name="phone" type="text">
                                        </div>
                                    </div>
                                    <div class="item form-group">
                                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="address">
                                            地址
                                        </label>
                                        <div class="col-md-6 col-sm-6 col-xs-12">
                                            <input id="address" class="form-control col-md-7 col-xs-12"
                                                   value="${sysUser.address}" name="address" type="text">
                                        </div>
                                    </div>
                                    <div class="item form-group">
                                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="roleId">
                                            角色
                                        </label>
                                        <div class="col-md-6 col-sm-6 col-xs-12">
                                            <select id="roleId" name="roleId" class="form-control">
                                                <c:forEach items="${roleList}" var="role">
                                                    <option value="${role.id}" ${role.id == sysUser.roleId ? "selected='selected'" : ""}>${role.roleName}</option>
                                                </c:forEach>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="item form-group">
                                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="idPic">
                                            证件照
                                        </label>
                                        <div class="col-md-6 col-sm-6 col-xs-12">
                                            <input id="idPic" name="idPic"  class="form-control col-md-7 col-xs-12" type="file" >
                                        </div>
                                    </div>
                                    <div class="item form-group">
                                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="workPic">
                                            工作照
                                        </label>
                                        <div class="col-md-6 col-sm-6 col-xs-12">
                                            <input id="workPic" name="workPic"  class="form-control col-md-7 col-xs-12" type="file" >
                                        </div>
                                    </div>
                                    <div class="ln_solid"></div>
                                    <div class="form-group">
                                        <div class="col-md-6 col-md-offset-3">
                                            <button id="send" type="submit" class="btn btn-success">提交</button>
                                            <button type="button" onclick="history.back()" class="btn btn-primary">返回</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 底部内容 -->
        <jsp:include page="/WEB-INF/layout/footer.jsp"></jsp:include>
        <!-- 底部内容 -->

        <script type="text/javascript" src="${ctx}/statics/js/common/save.js"></script>
        <script>
            $(function(){
                // 如果获取到生日，则作为默认
                let defaultDate = "<fmt:formatDate value="${sysUser.birthday}" pattern="yyyy-MM-dd" />";
                // 配置日期选择组件
                $('#birthday-datetimepicker').datetimepicker({
                    format: 'YYYY-MM-DD',
                    locale: moment.locale('zh-cn'),
                    defaultDate : defaultDate
                });
                $('#birthday-datetimepicker').data("DateTimePicker")
                    .maxDate(new moment().format("YYYY-MM-DD"));
            })
        </script>

        <script>
            $(function(){
                $("#account").on("input", function (){
                    // 输入过程中清除显示信息
                    clearInfo("#account");
                }).on("blur", function (){
                    // 失去焦点事件中，请求后端检查account是否存在
                    $.ajax({
                        type:"GET",//请求类型
                        url: ctx + "/main/user/accountExist",//请求的url
                        data:{ account: $(this).val() },//请求参数
                        dataType:"json",//ajax接口（请求url）返回的数据类型
                        success:function(data){//data：返回数据（json对象）
                            if(data.exist == 1){
                                //账号已存在，提示错误提示
                                showErrorInfoFor("#account", "该用户账号已存在")
                            }else if(data.exist == 0){
                                //账号可用，提示正确提示
                                showSuccessInfoFor("#account", "该账号可以使用")
                            }else if(data.error){
                                // 后台传了错误提示，显示
                                showErrorInfoFor("#account", data.error)
                            }
                        },
                        error:function(data){//当访问时候，404，500 等非200的错误状态码
                            showErrorInfoFor("#account", "请求异常，请联系管理员解决！")
                        }
                    });
                })
            })
        </script>

    </div>
</div>

</body>
</html>

